<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml" lang="">
<head>
    <meta charset="utf-8">
    <title>会议室统计</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="meeting-room-table" lay-filter="meeting-room-table"></table>
    </div>
</div>

<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let cols = [
            [{checkbox: true},
                {field: 'roomName', title: '会议室名称'},
                {field: 'reservationNum', title: '总预约次数', sort: true, totalRow: true},
                {field: 'totalDuration', title: '总使用时长(小时)', sort: true, totalRow: true},
                {field: 'mostFrequentDate', title: '最频繁时间段', sort: true}
            ]]
        table.render({
            elem: '#meeting-room-table',
            url: baseURL + 'meeting/meetRoom/count', // 后端接口地址
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            type: 'get',
            page: true,
            curr: 1,
            cols: cols,
            skin: 'line',
            limits: [5, 10, 15, 20],
            parseData: function (res) {
                console.log(res.data)
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.total,
                    "data": res.data.list // 解析数据列表
                };
            },
            response: {
                statusName: "code",
                msgName: "msg",
                statusCode: 1000,
                dataName: "data"
            }
        });
    });
</script>
</body>
</html>